<template>
    <div id="mapContainer" style="width: 100%; height: 600px;"></div>
  </template>
  
  <script setup>
  import { onMounted, ref} from 'vue';


// 定义props
const props = defineProps({
  data: {
    type: Object,
    required: true
  }
});

  
  onMounted(() => {
    const address = props.data;
    getGeocode(address, (err, point) => {
      if (!err && point) {
        initMap(point.lng, point.lat, address);
      } else {
        console.error('获取地理编码失败:', err.message);
      }
    });
  });
  
  function initMap(lng, lat, address) {
    const map = new BMap.Map("mapContainer");
    const point = new BMap.Point(lng, lat);
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(true);
  
    const marker = new BMap.Marker(point); // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中
  
    const opts = {
      width: 200,     // 信息窗口宽度
      height: 100,    // 信息窗口高度
      title: "位置",  // 信息窗口标题
    };
    const infoWindow = new BMap.InfoWindow(`地址：${address}`, opts); // 创建信息窗口对象
    marker.addEventListener("click", function() {
      map.openInfoWindow(infoWindow, point); // 开启信息窗口
    });
  
      // 立即打开信息窗口
      map.openInfoWindow(infoWindow, point);
  }
  
  function getGeocode(address, callback) {
    const geoc = new BMap.Geocoder();
    geoc.getPoint(address, function(point){
      if (point) {
        callback(null, point);
      } else {
        callback(new Error('未能解析出坐标'));
      }
    }); // 注意：这里填写城市名称有助于提高解析精度
  }
  
  </script>
  
  <style scoped>
		#mapContainer
     {overflow: hidden;margin:0;font-family:"微软雅黑";}
  </style>